<template>
	<view class="notification-page">


		<!-- 通知列表 -->
		<scroll-view class="notification-list" scroll-y @scrolltolower="loadMore" refresher-enabled
			refresher-triggered="{{refreshing}}" @refresherpulling="onPulling" @refresherrefresh="onRefresh">
			<!-- 通知项 -->
			<view class="notification-item" v-for="(item, index) in notifications" :key="item.id"
				@click="navigateToDetail(item.id)">
				<view class="notification-content">
					<text class="notification-title">{{ item.title }}</text>
					<text class="notification-brief">{{ item.brief }}</text>
					<text class="notification-time">{{ formatTime(item.time) }}</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="notifications.length === 0 && !loading">
				<image src="/static/icons/empty-notification.png" class="empty-icon" mode="aspectFit" />
				<text class="empty-text">暂无系统通知</text>
			</view>

			<!-- 加载中 -->
			<view class="loading-state" v-if="loading">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 加载完毕 -->
			<view class="end-state" v-if="notifications.length > 0 && !hasMore && !loading">
				<text class="end-text">已显示全部通知</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';

	// 状态管理
	const notifications = ref([]);
	const loading = ref(false);
	const hasMore = ref(true);
	const refreshing = ref(false);
	const page = ref(1);
	const pageSize = ref(10);

	// 页面加载时获取通知列表
	onMounted(() => {
		fetchNotifications();
	});

	// 获取通知数据
	const fetchNotifications = () => {
		// 模拟加载状态
		loading.value = true;

		// 模拟API请求
		setTimeout(() => {
			// 模拟数据 - 只有一条今天的系统上线通知
			const mockData = [{
				id: 'notify-001',
				title: '系统上线通知',
				brief: '新系统已正式上线，带来全新的用户体验和功能优化',
				// 使用iOS兼容的ISO格式时间，设置为今天
				time: new Date().toISOString()
			}];

			// 设置为没有更多数据
			hasMore.value = false;

			// 更新数据
			notifications.value = mockData;

			// 结束加载状态
			loading.value = false;
			refreshing.value = false;
		}, 1000);
	};

	// 下拉刷新
	const onRefresh = () => {
		// 重置状态，但保持只有一条通知
		fetchNotifications();
	};

	const onPulling = () => {
		// 下拉过程中可以添加一些动画效果
	};

	// 上拉加载更多
	const loadMore = () => {
		// 因为只有一条固定通知，所以不执行任何加载操作
		if (!loading.value) {
			loading.value = true;
			// 短暂显示加载状态后结束
			setTimeout(() => {
				loading.value = false;
			}, 500);
		}
	};

	// 格式化时间
	const formatTime = (timeStr) => {
		// 确保时间格式兼容，特别是iOS系统
		let timeObj;
		try {
			// 尝试直接解析
			timeObj = new Date(timeStr);
			
			// 检查是否为有效日期
			if (isNaN(timeObj.getTime())) {
				// 如果无效，尝试格式转换
				if (timeStr.includes(' ') && !timeStr.includes('T')) {
					// 转换 'yyyy-MM-dd HH:mm:ss' 格式为 ISO 格式
					timeStr = timeStr.replace(' ', 'T') + '+08:00';
				}
				timeObj = new Date(timeStr);
			}
		} catch (error) {
			// 如果解析失败，使用当前时间
			timeObj = new Date();
		}

		const now = new Date();
		const diffMs = now - timeObj;
		const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

		if (diffDays === 0) {
			// 今天
			return `${timeObj.getHours().toString().padStart(2, '0')}:${timeObj.getMinutes().toString().padStart(2, '0')}`;
		} else if (diffDays === 1) {
			// 昨天
			return `昨天 ${timeObj.getHours().toString().padStart(2, '0')}:${timeObj.getMinutes().toString().padStart(2, '0')}`;
		} else if (diffDays < 7) {
			// 一周内
			const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			return `${weekdays[timeObj.getDay()]}`;
		} else {
			// 超过一周
			return `${timeObj.getMonth() + 1}月${timeObj.getDate()}日`;
		}
	};

	// 导航到详情页 - 已移除标记为已读的代码
	const navigateToDetail = (id) => {
		uni.navigateTo({
			url: `/pages/notificationDetail/notificationDetail?id=${id}`
		});
	};

	// 返回上一页
	const navigateBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style scoped>
	.notification-page {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 导航栏样式 */
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 24rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eeeeee;
	}

	.back-btn {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1d2129;
		flex: 1;
		text-align: center;
	}

	.empty-space {
		width: 40rpx;
		height: 40rpx;
	}

	/* 通知列表样式 */
	.notification-list {
		min-height: calc(100vh - 90rpx);
		padding-bottom: 30rpx;
	}

	.notification-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		margin: 10rpx 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s ease;
	}

	.notification-item:active {
		transform: scale(0.99);
	}

	.notification-content {
		flex: 1;
		padding-right: 20rpx;
		overflow: hidden;
	}

	.notification-title {
		font-size: 28rpx;
		color: #1d2129;
		font-weight: 500;
		margin-bottom: 8rpx;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.notification-brief {
		font-size: 24rpx;
		color: #86909c;
		margin-bottom: 12rpx;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.notification-time {
		font-size: 22rpx;
		color: #c9cdD4;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;
	}

	.empty-icon {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #86909c;
	}

	/* 加载状态 */
	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.loading-spinner {
		width: 36rpx;
		height: 36rpx;
		border: 4rpx solid #e5e7eb;
		border-top-color: #2c6ecb;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 16rpx;
	}

	.loading-text {
		font-size: 24rpx;
		color: #86909c;
	}

	/* 加载完毕 */
	.end-state {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
	}

	.end-text {
		font-size: 24rpx;
		color: #86909c;
	}

	/* 动画 */
	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>